<template>
	<div>
		<el-row>
			<el-col :span="24">
				<el-table
					v-loading="tableLoading"
					element-loading-spinner="el-icon-loading"
					border
					size="mini"
					class="small-size-table"
					:data="tableDataList"
					style="width: 100%;margin-bottom:15px"
					:header-cell-style="getRowClass"
					highlight-current-row
					:max-height="tableHeight"
				>
					<el-table-column
						v-for="(itm, index) in tableDataColumn"
						:key="index"
						:label="itm.label"
						:min-width="itm.minWidth"
						:align="itm.align"
						:show-overflow-tooltip="itm.showTip"
					>
						<template slot="header" slot-scope="{ column, $index }">
							<!--soltHeraer 值为true双表头false单表头-->
							<span v-if="itm.soltHeraer">
								{{ $t(itm.label) }}
								<br />
								{{ $t(itm.subLabel) }}
							</span>
							<span v-else>
								{{ $t(itm.label) }}
							</span>
						</template>
						<template slot-scope="{ row, $index }">
							<!-- 自动定插槽渲染 -->
							<span v-if="itm.renderType === 'slot'">
								<slot
									:name="itm.slotName"
									:rowData="row"
									:index="$index"
								></slot>
							</span>
							<!-- 金额渲染 -->
							<span v-if="itm.renderType === 'amount'">
								<p :style="
									itm.soltColor && itm.soltColor
									? handleNumberColor(
										row[itm.prop]
									  )
									: ''
								">
									{{ handleCurrency(row['currency']) }}
									{{
										handleNumber(row['currency'], row[itm.prop])
									}}
								</p>
							</span>
							<!-- 数量渲染 -->
							<span v-if="itm.renderType === 'num'">
								{{ handleNumber('', row[itm.prop], 0) }}
							</span>
							<!-- 百分比例渲染 -->
							<span v-if="itm.renderType === 'percentage'">
								<p>
									{{ handlePercentage(row[itm.prop]) }}
								</p>
							</span>
							<!-- 针对双表头数量的渲染 -->
							<span v-if="itm.renderType === 'twoPropSolt'">
								{{ handleNumber('', row[itm.prop], 0) }}
								<br />
								{{ handleNumber('', row[itm.subProp], 0) }}
							</span>
							<!-- 双表头默认值渲染 -->
							<span v-if="itm.renderType === 'twoDefautlSolt'">
								{{ row[itm.prop] || '-' }}
								<br />
								{{ row[itm.subProp] || '-' }}
							</span>
							<!-- 账号类型渲染 -->
							<span v-if="itm.renderType === 'accountTypeSolt'">
								<p>
									{{
										typeFilter(
											row[itm.prop],
											row[itm.accountType]
										)
									}}
								</p>
							</span>
							<!-- 公共过滤渲染 -->
							<span v-if="itm.renderType === 'commonTypeSolt'">
								<p>
									{{
										typeFilter(
											row[itm.prop],
											itm.accountType
										)
									}}
								</p>
							</span>
							<!-- 默认渲染 -->
							<span v-if="itm.renderType === 'defautlSolt'">
								{{ row[itm.prop] || '-' }}
							</span>
							<div
								v-if="
									itm.renderType === 'amountWithTexasDetail'
								"
								class="blueColor decoration"
								style="cursor: pointer;"
								@click="showDetails"
							>
								{{ handleCurrency(row['currency']) }}
								{{
									handleNumber(
										row['currency'],
										row['serviceAmountContribution']
									)
								}}
							</div>
							<!--双表头金额值显示处理-->
							<div v-if="itm.solt === 'twoValSolt'">
								<p>
									<span :style="
									itm.soltColor && itm.soltColor
											? handleNumberColor(
												row[itm.prop]
											)
											: ''
									">
										{{ handleCurrency(row['currency']) }}
										{{
											handleNumber(
												row['currency'],
												row[itm.prop]
											)
										}}
									</span>
									<br />
									<span :style="
									itm.soltColor && itm.soltColor
											? handleNumberColor(
												row[itm.subProp]
											)
											: ''
									">
										{{ handleCurrency(row['currency']) }}
										{{
											handleNumber(
												row['currency'],
												row[itm.subProp]
											)
										}}
									</span>
								</p>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</el-col>
		</el-row>
		<ServiceChargeDetail
			:dialog="dialog"
			:kind="teamFlag"
			:tableData="tableDataList"
			:handleClose="handleClose"
		/>
	</div>
</template>
<script>
import list from '@/mixins/list'
import ServiceChargeDetail from '@/components/Dialog/ServiceChargeDetail'

export default {
	name: 'ReportDetailTable',
	mixins: [list],
	components: {
		ServiceChargeDetail
	},
	props: {
		// 表格loading
		tableLoading: {
			type: Boolean,
			default: false
		},
		// 表格数据
		tableDataList: {
			type: Array,
			default: () => []
		},
		tableDataColumn: {
			type: Array,
			default: () => []
		},
		teamFlag: {
			type: String,
			default: ''
		},
		tableHeight: {}
	},
	data() {
		return { dialog: false }
	},
	mounted() {
	},
	methods: {
		showDetails() {
			this.dialog = true
		},
		handleClose() {
			this.dialog = false
		}
	}
}
</script>
